<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            background-color: darkblue;
        }
        /*伪元素选择器*/
        /*插入的是行内元素*/
        .box::before{
            content:'我';
            color: navajowhite;

            /*伪元素是行内元素设置不了大小*/
            width:100px;
            display: block;
            background-color: #ff6700;
        }
        .box::after{
            content: '好人';
        }
        .nav a:nth-child(-n+3)::after{
            content:"|";
            margin-left:10px;
            margin-right: 8px;
        }
    </style>
</head>
<body>
<div class="box">
    是
</div>
<hr>
<div class="nav">
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
</div>
</body>
</html>